<template>
  <view class="box">
   <view class="box-img"  :style="{'background-image' : 'url('+bgImg+')'}"></view>
   <musichead class="home-title" :title="titleName" :icon="true"></musichead>
   <swiper class="box-swiper">
     <swiper-item class="box-swipers">
       <view class="swiper-item">
         <view class="box-scroll-image" @click="toPlay">
                     <image :src="bgImg" :class="{'detail-play-run' : isRoute }"></image>
                     <text class="iconfont" :class="iconPlay"></text>
                       <view></view>
                    </view>
                   <view class="box-scroll-lyr">
                   <view class="box-scroll-lyr-wrap" :style="{transform : 'translateY('+ -(lyIndex -1) *82 +'rpx)'}">
                   <view class="box-scroll-lyr-wrap-text" :class="{active : lyIndex==index}" v-for="(iii,index) in songLyr" :key="index">{{iii.geci}}</view>
                     </view>
                    </view>
       </view>
     </swiper-item>
     <swiper-item class="box-swipers2">
       <scroll-view class="box-scroll-lyr2" :scroll-y="true">
       <view class="box-scroll-lyr-wrap" :style="{transform : 'translateY('+ -(lyIndex -1) *82 +'rpx)'}">
       <view class="box-scroll-lyr-wrap-text2" :class="{active : lyIndex==index}" v-for="(iii,index) in songLyr" :key="index">{{iii.geci}}</view>
         </view>
        </scroll-view >
     </swiper-item>
   </swiper>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        ids:1,
        songDetails:[],
        bgImg:'',
        titleName:'',
        songText:'',
        songLyr:'',
        lyIndex:0,
        songUrl:'',
        iconPlay:'icon-bofang',
        isRoute: false
      }
    },
    onLoad(options){
      this.ids = options.id
      this.getSong()
      this.getSongText()
      this.getPlay()
    },
    onUnload(){
     this.clearIndex() 
    },
    onHide(){
      this.clearIndex()
    },
    methods: {
     async getSong(){
        let result = await uni.$http.get('/song/detail?ids='+this.ids)
        this.songDetails = result.data.songs
        this.bgImg = result.data.songs[0].al.picUrl
        this.titleName = result.data.songs[0].name
      },
     async getSongText(){
        let result = await uni.$http.get('/lyric?id='+this.ids)
        if(result.data.code==200){
          this.songText = result.data.lrc.lyric
          let res = /\[([^\]]+)\]([^\[]+)/g;
          let resul =[]
          this.songText.replace(res, ($0,$1,$2)=>{
            resul.push({"time":this.formatTime($1),"geci":$2})
          });
          this.songLyr = resul
          }
      },
     async getPlay(){
       let result = await uni.$http.get('/song/url?id='+this.ids) 
       if(result.data.code==200){
         this.songUrl = result.data.data[0].url
        this.ass = uni.createInnerAudioContext();
        this.ass.src = result.data.data[0].url
        this.geciScroll()
        this.ass.onPlay(() => {
         this.iconPlay='icon-zanting'
         this.isRoute = true
         this.geciScroll()
        });
        this.ass.onPause(() => {
          this.iconPlay='icon-bofang'
          this.isRoute = false
          this.clearIndex()
        });
       }
      },
      formatTime(val){
        let arr= val.split(':')
        return (Number(arr[0]*60) + Number(arr[1])).toFixed(1)
      },
      toPlay(){
      if(this.ass.paused){
        this.ass.play()
      }
      else{
        this.ass.pause()
      }
      },
      geciScroll(){
        clearInterval(this.timer)
        this.timer = setInterval(()=>{
         for(var i=0; i<this.songLyr.length;i++){
           if(this.ass.currentTime > this.songLyr[this.songLyr.length-1].time){
             this.lyIndex = this.songLyr.length-1
             break
           }
           if(this.ass.currentTime > this.songLyr[i].time && this.ass.currentTime < this.songLyr[i+1].time){
             this.lyIndex = i
           }
         } 
        },500)
      },
      clearIndex(){
        clearInterval(this.timer)
      }
    }
  }
</script>

<style scoped>
  .box{
    width:100%;
    height:1300rpx;
    /* background: pink; */
  }
 .box-img{ 
   width:100%;
  height:93vh;
  filter:blur(2px);
  background-size: cover;
 } 
.box-swiper{
  position: absolute;
  top:-23rpx;
  left:0rpx;
  width:100%;
  height:100%;
}
.home-title{
  position:absolute;
  top:0;
  left:0;
}
.box-scroll{
  position:absolute;
  top:0rpx;
  left:111rpx;
  width:100%;
  height:100%;
}
.box-scroll-image{
  margin-top:388rpx;
  margin-left:100rpx;
  width:580rpx;
  height: 580rpx;
  background: url('../../static/cd.png');
  background-size: cover;
}
.box-scroll-image image{
  position:absolute;
  top:490rpx;
  left:211rpx;
  width:370rpx;
  height:370rpx;
  border-radius: 50%;
 animation: 10s linear move infinite;
 animation-play-state: paused;
}
.box-scroll-image .detail-play-run{
  animation-play-state: running;
}
@keyframes move{
  from{transform: rotate(0deg);}
  to{transform: rotate(360deg);}
}
.box-scroll-image text{
  position:absolute;
  top:659rpx;
  left:353rpx;
  font-size:100rpx;
  color:white;
}
.box-scroll-image view{
  position: absolute;
  top:130rpx;
  left:320rpx;
  width:290rpx;
  height:430rpx;
  background: url('../../static/needle-ab.png');
  background-size: cover; 
}
.box-scroll-lyr{
  margin-left:10rpx;
  margin-top:26rpx;
  font-size:36rpx;
  font-weight:800;
  line-height: 82rpx;
  color: #313132;
  height:246rpx;
  text-align: center;
  overflow: hidden;
}
.box-scroll-lyr2{
  margin-left:20rpx;
  margin-top:326rpx;
  font-size:36rpx;
  font-weight:800;
  /* line-height: 800rpx; */
  color: #202023;
  height:800rpx;
  text-align: center;
  overflow: hidden;
}
.box-scroll-lyr-wrap-text2{
  height:100rpx;
}
.box-scroll-lyr-wrap-text2.active{
  color:red;
}
.box-scroll-lyr-wrap{
  transition: .5s;
}
.box-scroll-lyr-wrap-text{
  height:82rpx;
}
.box-scroll-lyr-wrap-text.active{
  color:white;
}
</style>
